<template>
    <div class="ripple--wapper" ref="rootElement">
        <div class="ripple--container" ref="rippleContainer" @click="showRipple"></div>
        <slot />
    </div>
</template>

<script>
    export default {
        name:'ripple',
        data () {
            return {
                timer: 0
            }
        },
        props: {
            size: {
                type: Number,
                default: 100
            }
        },
        deactivated () {
            if(this.timer) {
                clearTimeout(this.timer)
            }
            while (this.$refs.rippleContainer.firstChild) {
                this.$refs.rippleContainer.removeChild(this.$refs.rippleContainer.firstChild)
            }
        },
        methods:{
            showRipple (e) {
                const ripple = document.createElement('span')
                const size = this.size
                const pos = this.$refs.rippleContainer.getBoundingClientRect()
                const clientX = e.clientX
                const clientY = e.clientY
                const x = clientX - pos.left - size / 2
                const y = clientY - pos.top - size / 2
                const style = `top:${y}px;left:${x}px;width:${size}px;height:${size}px`
                ripple.setAttribute('style', style)
                const container = this.$refs.rippleContainer
                container.appendChild(ripple)
                this.cleanRipple(container, ripple)
            },
            cleanRipple (container, ripple) {


                // this.showRipple(e)
                const _this = this
                if(this.timer) {
                    clearTimeout(this.timer)
                }
                this.timer=setTimeout(() =>{
                    //清除ripple
                    if (_this.$refs.rippleContainer && _this.$refs.rippleContainer.firstChild) {
                        _this.$refs.rippleContainer.removeChild(_this.$refs.rippleContainer.firstChild)
                    }
                    container.innerHTML = ""
                    // container.removeChild(ripple)
                }, 1000)
                this.$emit("click")
            }
        }
    }
</script>
<style lang="scss">
    .ripple--wapper {
        position: relative;
        overflow: hidden;
        //禁止文本选择
        -webkit-user-select: none;
        -moz-user-select: none;
        -webkit-user-select:none;
        -o-user-select:none;
        user-select:none;
        .ripple--container {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            span {
                position: absolute;
                transform: scale(0);
                border-radius: 100%;
                opacity: 0.3;
                background-color: #333;
                animation: ripple .5s cubic-bezier(0,0.21,0.06,0.81);
            }
            @keyframes ripple {
                0% {
                    opacity: 0;
                    transform: scale(0);
                }

                50%{
                    opacity: .25;
                }

                100% {
                    opacity: 0;
                    transform: scale(1);
                }
            }
        }
    }
</style>
